<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 100vh"></div>
    <div class="banner">
      <h1>欢迎登录后台管理系统</h1>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit(ruleFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import * as THREE from "three";
// @ts-ignore
import BIRDS from "vanta/src/vanta.birds";
import { onMounted, ref, onBeforeUnmount, reactive } from "vue";
import { useRouter } from "vue-router";
import { login } from "../../request/api";
const router = useRouter();
const vantaRef = ref("");
let vantaEffect: any = null;
onMounted(() => {
  localStorage.removeItem("newtoken");
  vantaEffect = BIRDS({
    el: vantaRef.value,
    THREE: THREE,
  });
  // @ts-ignore
  // 修改颜色时 cells 需要全大写字母 可生效
  VANTA.BIRDS({
    el: vantaRef.value,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    color1: 0xff0000,
    color2: 0xd1ff,
    backgroundColor: 0x625062,
  });
});
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
// 登录
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    { min: 6, max: 12, message: "密码长度在6·12个字母之间", trigger: "blur" },
  ],
});
// 接口类型
interface RuleForm {
  username: string;
  password: string;
}
const ruleForm = reactive<RuleForm>({
  //利用泛型
  username: "",
  password: "",
});
const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // 此处不需要使用 async/await
      // @ts-ignore
      login(ruleForm)
        .then((res) => {
          // console.log(res);
          localStorage.setItem("newtoken", res.data.token);
          router.push("/HomeView");
        })
        .catch((error) => {
          // console.error("登录失败:", error);
          ElMessage({
            message: error.msg,
            type: "error",
          });
        });
    } else {
      ElMessage({
        message: "请输入正确的账号和密码",
        type: "error",
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100%;

  .banner {
    z-index: 999;
    width: 600px;
    height: 500px;
    position: absolute;
    top: 200px;
    left: calc((100% - 540px) / 2);
    color: #fff;
    background-color: rgba($color: #57275c, $alpha: 0.3);
    box-shadow: 0 0 30px rgba(110, 61, 110, 0.5);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
      font-size: 60px;
    }

    p {
      margin-top: 60px;
      font-size: 20px;
    }

    .el-form {
      width: 300px;
      height: 50%;

      ::v-deep .el-input__inner {
        font-size: 16px !important;
      }

      ::v-deep .el-input__suffix {
        font-size: 16px;
      }

      .el-form-item {
        display: flex;
        align-items: center;
        height: 30%;

        .el-input {
          width: 100%;
          height: 50px;

          input {
            border-radius: 50px;
          }
        }

        .el-button {
          width: 100% !important;
          height: 50px;
          border-radius: 50px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
